<!--这是修改价格组件-->
<template>
	<div>
		<p class="filter"></p>
		<div class="addBox padding-b40">
			<h3 class="fixTitle">
				<span>修改价格</span>
				<p>
					<!-- <em class="pointer"><svg-icon icon-class="jian" class="font-size16"/></em>
          <em style="cursor: pointer;"><svg-icon class="font-size16" icon-class="fullScreen" /></em> -->
          <em class="pointer" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<table>
				<tr>
					<td class="leftTd">当前价格：</td>
					<td class="rightTd">{{productPrice}}元</td>
				</tr>
				<tr>
					<td class="leftTd">价格：</td>
					<td class="rightTd"><el-input type="number" min="0" v-model="newPrice" clearable placeholder="请输入价格" class="width250"></el-input></td>
				</tr>
			</table>
			<p class="c-textAlign-c" style="margin: 20px 0">
				<el-button @click="save" type="primary" icon="el-icon-check">确认</el-button>
	  			<el-button type="info" @click="close">取消</el-button>
			</p>
		</div>
	</div>
</template>
<script>
import { newPrice } from '@/api/goods'
export default {
  data() {
    return {
      newPrice: null
    }
  },
  props: ['productPrice', 'godId'],
  methods: {
    close() {
      this.$emit('hideEditPrice', false)
    },
    save() {
      if (!this.godId) {
        this.$message({
          type: 'error',
          message: '填写不完整!'
        })
        return
      }
      if (!this.newPrice || isNaN(this.newPrice) || this.newPrice < 0) {
        this.$message({
          type: 'error',
          message: '价格不能为空，且价格不能为负数!'
        })
        return
      }
      var data = { godId: this.godId, newPrice: this.newPrice }
      newPrice(data).then(res => {
        this.$message({
          type: 'success',
          message: '更改成功!'
        })
        this.$emit('successPrice', { newPrice: this.newPrice, godId: this.godId })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
	h3 em{
		padding: 0 5px;
		font-style: normal;
	}
	h3 em:hover{
		color: #0E90D2;
	}
	.font-size16{
		font-size: 16px;
	}
	.fixTitle{
		font-weight: 500;
		font-size: 14px;
		height: 36px;
		background: #eee;
		border-bottom: 1px solid #ddd;
		position: fixed;
		width: 400px;
		line-height: 36px;
		padding: 0 10px;
		z-index: 98;
	}
	.fixTitle p{
		position: absolute;
		right: 20px;
		top: 0px;
	}
	.filter {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 90;
	}
	.addBox {
		width: 400px;
		height: auto;
		background: #fff;
		position: fixed ;
		left: 35%;
		top: 30%;
		z-index: 101;
	}
	table{
		width: 100%;
		border: 1px solid #eee;
		border-spacing: 0;
		border-collapse: collapse;
		margin-top: 40px;
	}
	td{
		border: 1px solid #eee;
		line-height: 50px;
		padding-left: 10px;
	}
	.leftTd{
		width: 30%;
	}
	.rightTd{
		width: 70%;
	}
</style>
